<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="中文取名神器 - 基于古诗词的智能取名工具，每个名字都有出处和寓意">
    <title>中文取名神器 | 诗词取名 | 古风起名</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <header class="header">
            <div class="header-content">
                <h1 class="title">中文取名神器</h1>
                <p class="subtitle">传承千年诗词文化，为您的宝贝匠心取名</p>
            </div>
        </header>

        <!-- 主要功能区 -->
        <main class="main-content">
            <!-- 筛选条件 -->
            <section class="filter-section">
                <div class="filter-group">
                    <label for="gender">性别：</label>
                    <select id="gender" class="filter-select">
                        <option value="all">不限</option>
                        <option value="male">男孩</option>
                        <option value="female">女孩</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label for="nameLength">字数：</label>
                    <select id="nameLength" class="filter-select">
                        <option value="all">不限</option>
                        <option value="1">单字名</option>
                        <option value="2">双字名</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="poetry">诗词类型：</label>
                    <select id="poetry" class="filter-select">
                        <option value="all">不限</option>
                        <option value="tang">唐诗</option>
                        <option value="song">宋词</option>
                        <option value="classic">经典古文</option>
                        <option value="book">诗经楚辞</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="surname">姓氏：</label>
                    <input type="text" id="surname" class="surname-input" placeholder="请输入姓氏" maxlength="2">
                </div>

                <button class="generate-btn" onclick="generateNames()">
                    <span class="btn-text">生成好名字</span>
                    <span class="btn-icon">✨</span>
                </button>
                
                <button class="favorites-btn" onclick="showFavorites()">
                    <span class="btn-text">我的收藏</span>
                    <span class="btn-icon">❤️</span>
                    <span id="favorites-count" class="favorites-count">0</span>
                </button>
                
                <button class="config-btn" onclick="showConfigModal()">
                    <span class="btn-text">AI配置</span>
                    <span class="btn-icon">⚙️</span>
                </button>
            </section>

            <!-- 结果展示区 -->
            <section class="results-section">
                <div id="loading" class="loading hidden">
                    <div class="loading-animation"></div>
                    <p>正在为您精心挑选好名字...</p>
                </div>

                <div id="results-container" class="results-container">
                    <!-- 动态生成的结果将显示在这里 -->
                </div>
            </section>

            <!-- AI配置弹窗 -->
            <div id="config-modal" class="modal hidden">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>AI配置</h3>
                        <button class="modal-close" onclick="closeConfigModal()">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="config-info">
                            <p style="margin-bottom: 20px; color: #666; font-size: 0.9rem;">
                                配置AI API密钥后，可获得更智能、更个性化的取名体验。<br>
                                推荐使用<strong>DeepSeek</strong>，性价比最高，效果卓越。不配置也可以正常使用。
                            </p>
                            
                            <div class="config-item" style="border: 2px solid #4CAF50; border-radius: 8px; padding: 15px; margin-bottom: 15px; background: #f8fff8;">
                                <div style="display: flex; align-items: center; margin-bottom: 8px;">
                                    <label style="flex: 1; color: #2E7D32; font-weight: 600;">DeepSeek API密钥：</label>
                                    <span style="background: #4CAF50; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem;">推荐</span>
                                </div>
                                <input type="password" id="deepseek-api-key" placeholder="请输入DeepSeek API密钥" style="width: 100%; padding: 8px; border: 1px solid #4CAF50; border-radius: 4px; margin-top: 5px;">
                                <small style="color: #666;">获取地址：<a href="https://platform.deepseek.com" target="_blank" style="color: #4CAF50;">https://platform.deepseek.com</a> | 性价比最高，强烈推荐</small>
                            </div>
                            
                            <div class="config-item">
                                <label>通义千问 API密钥：</label>
                                <input type="password" id="qwen-api-key" placeholder="请输入通义千问API密钥" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-top: 5px;">
                                <small style="color: #999;">获取地址：https://dashscope.aliyuncs.com</small>
                            </div>
                            
                            <div class="config-item" style="margin-top: 20px;">
                                <label>智谱AI API密钥：</label>
                                <input type="password" id="zhipu-api-key" placeholder="请输入智谱AI API密钥" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-top: 5px;">
                                <small style="color: #999;">获取地址：https://open.bigmodel.cn</small>
                            </div>
                            
                            <div style="margin-top: 30px; display: flex; gap: 10px;">
                                <button onclick="saveConfig()" style="flex: 1; background: #4CAF50; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer;">
                                    保存配置
                                </button>
                                <button onclick="testDeepSeekAPI()" style="flex: 1; background: #2196F3; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer;">
                                    测试连接
                                </button>
                                <button onclick="clearConfig()" style="flex: 1; background: #f44336; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer;">
                                    清除配置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 名字详情弹窗 -->
            <div id="name-modal" class="modal hidden">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 id="modal-name" class="modal-name"></h3>
                        <button class="modal-close" onclick="closeModal()">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="name-info">
                            <div class="info-item">
                                <label>拼音：</label>
                                <span id="modal-pinyin"></span>
                            </div>
                            <div class="info-item">
                                <label>出处：</label>
                                <span id="modal-source"></span>
                            </div>
                            <div class="info-item">
                                <label>原文：</label>
                                <div id="modal-original" class="original-text"></div>
                            </div>
                            <div class="info-item">
                                <label>寓意：</label>
                                <div id="modal-meaning" class="meaning-text"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="footer">
            <p>&copy; 2024 中文取名神器 | 传承文化，用心取名</p>
        </footer>
    </div>

    <script src="js/data.js"></script>
    <script src="js/app.js"></script>
</body>
</html>